<template>
	<div class="housebox">
		<div class="tishi" v-if="tishiflag">{{msgs}}</div>
		<swiper :swipers="swipers"></swiper>
		<div class="part_info">
			<div class="houseid">
				<span>编号:<span id="houseid">{{houseinfos.house_num}}</span></span>
			</div>
			<div class="housetitle">{{houseinfos.house_title}}</div>
			<div class="housesize">
				<div class="price">
					<span class="zong"><i class="iactive">{{houseinfos.house_totalprices}}</i>元/月</span>
					<span class="dan">单价:<i>{{houseinfos.house_floorspace}}</i>元/㎡</span>
				</div>
				<div class="area">
					<span class="manji"><i  class="iactive">{{houseinfos.house_floorspace}}</i>㎡</span>
					<span class="gongwei">容纳:<i>21~46</i>个工位</span>
				</div>
				<div class="zhuangxiu">
					<span class="zhuangxiudu"><i  class="iactive">{{houseinfos.house_fitmentinfo}}</i></span>
				</div>
			</div>
		</div>
		<div class="mapbox">
			<div class="address">
				<i class="iconAreaBuild"></i><span>[{{houseinfos.house_district}}]</span>{{houseinfos.house_detailedaddress}}
			</div>
			<div class="tomap" @click="tomap">
				<i class="iconCheckMap"></i>[查看地图]
			</div>
		</div>
		<div class="surveybox">
			<div class="surveytile">概况</div>
			<div class="surveylist">
				<div class="double">
					<div><label>可注册:</label><span id="iszuce">{{houseinfos.house_isres}}</span></div>
					<div><label>免租时间:</label><span id="mianzu">{{houseinfos.house_freetime}}</span></div>
				</div>
				<div class="double">
					<div><label>最早可租:</label><span id="zuizao">{{houseinfos.house_earliest}}</span></div>
					<div><label>最短租期:</label><span id="zuiduan">{{houseinfos.house_shortest}}</span></div>
				</div>
				<div class="double">
					<div class="man"><label>面积信息:</label><span id="mianjiinfo">{{houseinfos.house_aareainfo}}</span></div>
				</div>
				<div class="double">
					<div class="man"><label>价格优势:</label><span id="priceinfo">{{houseinfos.house_priceadv}}</span></div>
				</div>
				<div class="double">
					<div class="man"><label>装修情况:</label><span id="zhuangxiuinfo">{{houseinfos.house_fitmentinfo}}</span></div>
				</div>
				<div class="double">
					<div class="man"><label>看房时间:</label><span id="kanfangtime">{{houseinfos.house_looktime}}</span></div>
				</div>
			</div>
			<div class="looknewhouse">查看&nbsp;线外公园<span>32</span>套出租房源</div>
			<div class="tese">
				<div class="tesetitle">房源特色</div>
				<div class="teselist">
					<span v-for="(item,index) in tese" class="spanactive">{{item}}</span>
				</div>
			</div>
		</div>
		<div class="counselor">
			<div class="counselortitle">免费咨询顾问</div>
			<div class="counselorlist">
				<div class="list">
					<img src="../../../static/imgage/kaola.jpg" />
					<div class="counselorinfo">
						<div>小考拉</div>
						<div>我是专业的</div>
					</div>
					<div class="counselorbtn">
						<div><i></i>免费咨询</div>
					</div>
				</div>
			</div>
		</div>
		<div class="ascriptionbox">
			<div class="asc_title">所属楼盘</div>
			<div class="asc_house">
				<img src="../../../static/imgage/asc.jpg" />
				<div class="asc_info">
					<span>线外城市花园</span>
					<p><span>65</span>元/㎡起</p>
					<p>在租房源:<i>32个</i></p>
					<p>人气:<i>10个用户正在关注,23次预约看房</i></p>
				</div>
			</div>
		</div>
		<div class="Maps">
			<div class="Maps_tile"><i>线外城市花园</i><span>详细介绍>></span></div>
			<div class="Maps_map">
				<b-map-component></b-map-component>
			</div>
		</div>
		<div class="serch">
			<div class="serch_input">
				<p>专业经纪人帮您找办公室</p>
				<div><input/><span>马上找房</span></div>
			</div>
			<div class="serch_more">已有<span>1203</span>人委托蜗居找到满意办公室、住房</div>
		</div>
		<div class="detailOther">
			<ul>
				<li class="listtitle">五个简单步骤让您入住新的办公室</li>
				<li class="listone">
					<i class="ione"></i>
					<div>
						<span>告知意向</span>
						<p>高数我们需求,专业写字楼顾问一对一问您服务</p>
					</div>
				</li>
				<li class="listone">
					<i class="itow"></i>
					<div>
						<span>优质房源</span>
						<p>好租网80万+海量房源，经纪人团队根据您的实际需求为您甄选，帮您决策</p>
					</div>
				</li>
				<li class="listone">
					<i class="itrr"></i>
					<div>
						<span>实地考察</span>
						<p>精选房源实地带看，节约您宝贵的时间和精力</p>
					</div>
				</li>
				<li class="listone">
					<i class="ifre"></i>
					<div>
						<span>谈判签约</span>
						<p>选定楼盘，签订正规商业租赁合同</p>
					</div>
				</li>
				<li class="listone">
					<i class="ifiv"></i>
					<div>
						<span>后续服务</span>
						<p>成功入驻并尊享注册、装修等一站式办公服务</p>
					</div>
				</li>
			</ul>
		</div>
		<div class="aginlook">
			<div class="agintitle">看过这个房源的人还看过</div>
			<div class="aginhouse" v-for="(item,index) in aginhouse">
				<img :src="'http://118.24.83.96:80/wojuAdmin/public/uploads/'+item.house_smallimg+'.jpg'" />
				<div class="agininfo">
					<p>{{item.house_title}}</p>
					<p>可租面积:<span>{{item.house_floorspace}}</span>㎡</p>
					<p><span class="agincolor">{{item.house_unitprice}}</span>元/㎡.月</p>
					<p>{{item.house_district}}</p>
				</div>
			</div>
		</div>
		<div class="part_foot">
			<div class="listfoot">
				<div><i>真</i>所有房源实地勘测</div>
				<div><i>广</i>海量楼盘全面覆盖</div>
				<div><i>专</i>专业顾问选址分析</div>
				<div><i>全</i>企业服务一站搞定</div>
			</div>
			<div class="footmain">
				<p><img src="../../../static/imgage/log.png"/></p>
				<p>免费咨询：400-58987-14</p>
				<p>关于好租</p>
				<p>
					<span>©2015-2018 重庆蜗居科技发展有限公司 渝ICP备222219026号</span>
					<span>京公网安备 11010802025685号</span>
					<span>地址：陌陌市陌陌区陌陌软件园南路57号陌陌学院</span>
				</p>
			</div>
		</div>
		<div class="bottombox">
			<img src="../../../static/imgage/kaola.jpg" />
			<div class="botinfo">
				<p>考拉 </p>
				<p>我是专业的</p>
			</div>
			<div class="botbtn">
				<span @click="yuyueshow1">预约看房</span>
				<span>免费咨询</span>
			</div>
		</div>
		
		<div class="yuyuehid" v-if="yuyue.yuyueflag1">
			<div class="yuyuetel" v-if="yuyue.yuyueflag2">
				<div class="popPreWrap">
					<div class="wraptitle">预约看房</div>
					<div class="wrapcontent">已有10人预约看过此房源预计很快会成交，留下联系方式，顾问带您实地看房</div>
					<div class="wrapserch">
						<input type="text" v-model="yuyue.usertel" /><span @click.stop="yzfun">立即预约</span>
					</div>
					<div class="msgbox" v-if="yuyue.msgflag">{{yuyue.msg}}</div>
				</div>
				<i @click="hidyuyue"></i>
			</div>
			<div class="yanzhengbox" v-if="yuyue.yuyueflag3">
				<div class="yztitle">输入验证码</div>
				<div class="telcode">
					<input type="text" v-model="code"/>
					<span @click.stop="getcode">{{yuyue.btnmsg}}</span>
				</div>
				<div class="subbtn" :style="btncla" @click="addyuyue">提交</div>
				<i @click="hidyuyue"></i>
			</div>
		</div>
	</div>
</template>

<script>
	import swiper from '@/components/particulars/public/swiper'
	import BMapComponent from '@/components/particulars/public/BMapComponent'
	export default {
		data() {
			return {
				yuyue:{
					yuyueflag1:false,
					yuyueflag2:false,
					yuyueflag3:false,
					msgflag:false,
					usertel:"",
					msg:"",
					btnmsg:"获取验证码"
				},
				tese: [],
				swipers:[],
				houseinfos:"",
				aginhouse:"",
				btncla:"",
				code:"",
				tishiflag : false,
				msgs:"添加成功，请留意客服来电"
			}
		},
		components: {
			swiper,BMapComponent
		},
		methods:{
			yuyueshow1:function(){
				this.yuyue.yuyueflag1 = true;
				this.yuyue.yuyueflag2 = true;
				this.yuyue.yuyueflag3 = false;
			},
			hidyuyue:function(){
				this.yuyue.yuyueflag1 = false;
				this.btncla = "";
			},
			yzfun:function(){
				var _this = this;
				var reg = /^1[34578]\d{9}$/;
				if(this.yuyue.usertel == ""){
					this.yuyue.msgflag = true;
					this.yuyue.msg = "请输入电话号码";
				}else{
					if(!reg.test(this.yuyue.usertel)){
						this.yuyue.msgflag = true;
						this.yuyue.msg = "电话号码格式不正确";
					}else{
						this.yuyue.yuyueflag2 = false;
						this.yuyue.yuyueflag3 = true;
						sessionStorage.setItem("usertel",this.yuyue.usertel);
					}
				}
				setTimeout(function(){
					_this.yuyue.msgflag = false;
				},1500);
			},
			getcode:function(){
				this.yuyue.btnmsg = "已发送";
				var _this = this;
				var data = {
					usertel:sessionStorage.getItem("usertel")
				}
				_this.axios.post(this.ajaxUrls+'/api/Message/sendMsg',_this.qs.stringify(data)).then(function(res){
					sessionStorage.setItem("usercode",res.data);
					_this.btncla = "background: orange;";
				}).catch(function(){
					
				})
			},
			tomap:function(){
				this.$router.push("/mapparticulars");
			},
			addyuyue:function(){
				if(this.code == sessionStorage.getItem("usercode")){
					var _this = this;
					var data = {
						userid:localStorage.getItem("userId"),
						houseid:this.houseinfos.id
					}
					_this.axios.post(this.ajaxUrls+'/api/Details/addyuyue',_this.qs.stringify(data)).then(function(res){
							_this.yuyue.yuyueflag1 = false;
							_this.tishiflag = true;
							setTimeout(function(){
								_this.tishiflag = false;
							},2000)
					}).catch(function(){
						
					})
				}
			}
			
		},mounted:function(){
			if(sessionStorage.getItem("usertel") != null){
				this.yuyue.usertel = sessionStorage.getItem("usertel");
			}
			var _this = this;
			var data = {
				houseid:this.$route.params.id
			}
			_this.axios.post(this.ajaxUrls+'/api/Details/selhouse',_this.qs.stringify(data)).then(function(res){
				_this.houseinfos = res.data[0];
				_this.tese = _this.houseinfos.house_feature.split(",");
				_this.swipers = _this.houseinfos.house_bigimg.split(",");
				if(_this.houseinfos.house_isres == 1){
					_this.houseinfos.house_isres = "是";
				}else{
					_this.houseinfos.house_isres = "否";
				}
			}).catch(function(err){
				console.log(err)
			});
			_this.axios.get(this.ajaxUrls+'/api/Details/aginhouse').then(function(res){
				_this.aginhouse = res.data;
			}).catch(function(){
				console.log(err)
			});
		}
	};
</script>

<style scoped="scoped">
	body {
		background: #f1f1f1 !important;
	}
	.tishi{
		font-size: 0.3rem;
		color: black;
		background: gainsboro;
		width: 5rem;
		text-align: center;
		padding: 0.2rem 0.3rem;
		box-sizing: border-box;
		position: fixed;
		top: 50%;
		left: 15%;
	}
	.bottombox{
		width: 7.5rem;
		height: 1.2rem;
		padding: 0 0.2rem;
		background: #FFFFFF;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		position: fixed;
		bottom: 0;
	}
	.bottombox>img{
		width: 1rem;
		height: 1rem;
		border-radius: 50%;
		margin-top: 0.1rem;
	}
	.botinfo{
		width: 2.4rem;
		height: 1.2rem;
		padding: 0.2rem 0.1rem;
		box-sizing: border-box;
	}
	.botinfo>p{
		height: 0.4rem;
		font-size: 0.25rem;
		line-height: 0.4rem;
		color: #666666;
	}
	.botbtn{
		width: 3.5rem;
		height: 1.2rem;
	}
	.botbtn>span{
		display: inline-block;
		width: 1.6rem;
		height: 0.7rem;
		font-size: 0.3rem;
		color: white;
		text-align: center;
		line-height: 0.7rem;
		margin-top: 0.25rem;
		border-radius: 0.1rem;
	}
	.botbtn>span:first-of-type{
		background: #ffb400;
	}
	.botbtn>span:last-of-type{
		background: #f4811f;
	}
	.part_foot{
		width: 7.5rem;
		height: 7.5rem;
		background: #2d2d2d;
		padding: 0.2rem;
		box-sizing: border-box;
		margin-top: 0.2rem;
	}
	.footmain{
		width: 100%;
		height: 4rem;
	}
	.footmain>p{
		height: 1.2rem;
		text-align: center;
	}
	.footmain>p:first-of-type>img{
		width: 1.5rem;
		height: 1rem;
	}
	.footmain>p:nth-of-type(2){
		height: 0.6rem;
		font-size: 0.35rem;
		color: #999999;
	}
	.footmain>p:nth-of-type(3){
		height: 0.4rem;
		font-size: 0.25rem;
		color: #999999;
	}
	.footmain>p:nth-of-type(4){
		height: 1.2rem;
		font-size: 0.24rem;
		color: #999999;
		line-height: 0.4rem;
	}
	.footmain>p:nth-of-type(4)>span{
		display: block;
	}
	.listfoot{
		width: 100%;
		height: 2.5rem;
		padding: 0.3rem;
		box-sizing: border-box;
	}
	.listfoot>div{
		width: 50%;
		height: 1rem;
		color: #999;
		font-size: 0.25rem;
		float: left;
	}
	.listfoot>div>i{
		font-size: 0.55rem;
		padding-right: 0.1rem;
	}
	.aginlook{
		width: 100%;
		height: auto;
		padding: 0.2rem;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 0.2rem;
	}
	.aginlook>.agintitle{
		width: 100%;
		height: 0.6rem;
		font-size: 0.3rem;
		line-height: 0.6rem;
		color: #666666;
	}
	.aginhouse{
		width: 100%;
		height: 2rem;
		display: flex;
		justify-content: space-between;
		padding: 0.2rem 0;
		border-bottom: 1px solid #F1F1F1;
	}
	.aginhouse>img{
		width: 2.2rem;
		height: 1.5rem;
		margin-top: 0.2rem;
	}
	.agincolor{
		color: #FF9900 !important;
		font-weight: bold;
	}
	.agininfo{
		width:5.6rem;
		height: 2.5rem;
		padding-left: 0.2rem;
		box-sizing: border-box;
		font-size: 0.25rem;
		color: #666666;
	}
	.agininfo>p{
		height: 0.5rem;
	}
	.agininfo>p:first-of-type{
		width: 4.7rem;
		font-size: 0.3rem;
		color: #333333;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.detailOther {
		width: 7.5rem;
		height: auto;
		padding: 0.2rem;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 0.2rem;
	}
	
	.detailOther>ul {
		width: 100%;
		height: 100%;
	}
	
	.listtitle {
		height: 0.8rem;
		font-size: 0.3rem;
		color: #666666;
		line-height: 0.8rem;
	}
	
	.listone {
		width: 100%;
		height: 1.5rem;
		display: flex;
		justify-content: space-between;
	}
	.listone>div{
		width: 6rem;
		font-size: 0.25rem;
		color: #666666;

	}
	.listone>div>span{
		display: block;
		width: 100%;
		height: 0.5rem;
		line-height: 0.5rem;
	}
	.listone>div>p{
		height: 0.8rem;
	}
	.ione,.itow,.itrr,.ifre,.ifiv{
		display: inline-block;
		vertical-align: middle;
		width: 1.5rem;
		height: 1.4rem;
		margin: 0 .13333333rem 0 0;
		background: url(../../../static/imgage/icon_fiveSteps.png) no-repeat;
		background-size: 7rem 7rem;
		background-position: 0 0;
	}
	.itow{
		background-position: 0 -1.4rem;
	}
	.itrr{
		background-position: 0 -2.8rem;
	}
	.ifre{
		background-position: 0 -4.2rem;
	}
	.ifiv{
		background-position: 0 -5.6rem;
	}
	.serch {
		width: 7.5rem;
		height: 2.8rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 0.2rem;
	}
	
	.serch_input {
		width: 100%;
		height: 2.3rem;
		background: url(../../../static/imgage/serch.jpg);
		background-size: cover;
	}
	
	.serch_input>div {
		width: 5rem;
		height: 1rem;
		text-align: center;
		margin: auto;
	}
	
	.serch_input>div>input {
		width: 3.5rem;
		height: 0.5rem;
		border: none;
		outline: none;
		border-radius: 0.02rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
		font-size: 0.2rem;
		color: #666666;
		float: left;
	}
	
	.serch_input>div>span {
		width: 1.5rem;
		height: 0.5rem;
		background: #FF9900;
		text-align: center;
		color: #FFFFFF;
		float: left;
		font-size: 0.25rem;
		line-height: 0.5rem;
	}
	
	.serch_input>p {
		height: 1rem;
		font-size: 0.28rem;
		color: #FFFFFF;
		text-align: center;
		line-height: 1rem;
	}
	
	.serch_more {
		width: 100%;
		height: 0.5rem;
		font-size: 0.25rem;
		color: #666666;
		text-align: center;
		line-height: 0.5rem;
	}
	
	.serch_more>span {
		color: #FF9900;
	}
	
	.Maps {
		width: 7.5rem;
		height: 5rem;
		background: #FFFFFF;
		margin-top: 0.2rem;
	}
	
	.Maps_tile {
		width: 100%;
		height: 1rem;
		display: flex;
		justify-content: space-between;
		line-height: 1rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}
	
	.Maps_tile>i {
		font-size: 0.3rem;
		color: #666;
	}
	
	.Maps_tile>span {
		font-size: 0.25rem;
		color: #666;
	}
	
	.Maps_map {
		width: 100%;
		height: 4rem;
		border-bottom: solid gainsboro;
		overflow: hidden;
	}
	
	.ascriptionbox {
		width: 7.5rem;
		height: 3rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
		background: #FFFFFF;
		margin-top: 0.2rem;
	}
	
	.asc_title {
		width: 100%;
		height: 0.8rem;
		font-size: 0.3rem;
		color: #666666;
		line-height: 0.8rem;
	}
	
	.asc_house {
		width: 100%;
		height: 2rem;
		display: flex;
		justify-content: space-around;
	}
	
	.asc_house>img {
		width: 2.7rem;
		height: 2rem;
	}
	
	.asc_house>div {
		width: 5.1rem;
		height: 2rem;
		padding-left: 0.2rem;
		box-sizing: border-box;
		line-height: 0.5rem;
	}
	
	.asc_info>span {
		display: block;
		width: 100%;
		height: 0.5rem;
		font-size: 0.28rem;
		color: #333;
	}
	
	.asc_info>p {
		width: 100%;
		height: 0.5rem;
		color: #666666;
		font-size: 0.2rem;
	}
	
	.asc_info>p>span {
		color: #f90 !important;
	}
	
	.asc_info>p>i {
		color: #333;
	}
	
	.counselorlist {
		width: 100%;
		height: auto;
	}
	
	.list {
		width: 100%;
		height: 1.2rem;
		display: flex;
		justify-content: space-around;
		padding: 0.2rem 0rem;
	}
	
	.list>img {
		width: 1.2rem;
		height: 1.2rem;
		border-radius: 50%;
	}
	
	.counselorinfo {
		width: 3.7rem;
		height: 1.2rem;
		color: #333;
		padding-left: 0.2rem;
		box-sizing: border-box;
	}
	
	.counselorinfo>div:first-of-type {
		font-size: 0.3rem;
		width: 100%;
		height: 0.7rem;
		line-height: 0.7rem;
		font-weight: bold;
	}
	
	.counselorinfo>div:last-of-type {
		width: 100%;
		font-size: 0.25rem;
		height: 0.5rem;
	}
	
	.counselorbtn {
		width: 2rem;
		height: 1.2rem;
	}
	
	.counselorbtn>div {
		display: flex;
		justify-content: space-around;
		width: 1.6rem;
		height: 0.6rem;
		text-align: center;
		font-size: 0.2rem !important;
		line-height: 0.6rem !important;
		background: #f90;
		font-size: 0.3rem;
		line-height: 0.5rem;
		margin-top: 0.3rem;
		color: #FFFFFF;
		padding: 0 0.1rem;
	}
	
	.counselorbtn>div>i {
		background: url(../../../static/imgage/icons.png) no-repeat -8.2rem -7.3rem;
		display: inline-block;
		width: .48rem;
		height: .48rem;
		background-size: 9rem 9rem;
		vertical-align: top;
	}
	
	.counselor {
		width: 7.5rem;
		height: auto;
		background: #FFFFFF;
		margin-top: 0.3rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}
	
	.counselortitle {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		font-weight: bold;
		font-size: 0.4rem;
	}
	
	.tese {
		width: 100%;
		height: 1.2rem;
	}
	
	.tesetitle {
		width: 100%;
		height: 0.6rem;
		font-size: 0.25rem;
		line-height: 0.6rem;
		color: #666;
	}
	
	.spanactive {
		display: inline-block;
		width: 1.2rem;
		height: 0.4rem;
		background: #eef2f8;
		font-size: 0.2rem;
		text-align: center;
		line-height: 0.4rem;
		color: #a2afc8;
		margin-left: 0.2rem;
	}
	
	.looknewhouse {
		width: 100%;
		height: 0.6rem;
		background: #f9f9f9;
		color: #999;
		font-size: 0.2rem;
		line-height: 0.6rem;
		text-align: center;
	}
	
	.looknewhouse>span {
		color: #FF9900;
	}
	
	.double {
		width: 100%;
		height: 0.5rem;
	}
	
	.double>div {
		width: 50%;
		height: 0.5rem;
		font-size: 0.25rem;
		float: left;
		color: #666;
	}
	
	.man {
		width: 100% !important;
	}
	
	.man>label {
		width: 20% !important;
	}
	
	.man>span {
		width: 80% !important;
	}
	
	.double>div>span {
		display: inline-block;
		width: 60%;
		float: left;
		color: #333 !important;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	
	.double>div>label {
		display: inline-block;
		width: 40%;
		height: 0.5rem;
		float: left;
	}
	
	.surveylist {
		width: 100%;
		height: 3.2rem;
	}
	
	.surveytile {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.3rem;
		color: #666;
	}
	
	.surveybox {
		width: 7.5rem;
		height: 6rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	
	.housebox {
		width: 7.5rem;
		height: auto;
	}
	
	.part_info {
		width: 7.5rem;
		height: 3.3rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	
	.houseid {
		width: 100%;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 0.28rem;
		color: #666;
	}
	
	.housetitle {
		width: 100%;
		height: 1.1rem;
		font-size: 0.4rem;
		font-weight: bold;
	}
	
	.housesize {
		width: 100%;
		height: 1.4rem;
		border-bottom: 1px solid gainsboro;
	}
	
	.housesize span {
		display: block;
		width: 100%;
		height: 0.55rem;
		padding: 0.05rem 0rem;
		box-sizing: border-box;
		text-align: center;
		font-size: 0.2rem;
		line-height: 0.5rem;
		color: #666666;
	}
	
	.housesize span>i {
		display: inline-block;
		padding: 0 0.08rem;
		box-sizing: border-box;
	}
	
	.price {
		width: 2.4rem;
		height: 1.1rem;
		float: left;
		border-right: 1px dashed gainsboro;
		box-sizing: border-box;
	}
	
	.area {
		width: 2.6rem;
		height: 1.1rem;
		float: left;
		border-right: 1px dashed gainsboro;
		box-sizing: border-box;
	}
	
	.zhuangxiu {
		width: 2.1rem;
		height: 1.1rem;
		float: left;
	}
	.zhuangxiu>span>i{
		font-size: 0.25rem !important;
	}
	.iactive {
		font-size: 0.3rem;
		color: #f90;
		font-weight: bold;
	}
	
	.mapbox {
		width: 7.5rem;
		height: 1rem;
		padding: 0 0.2rem;
		box-sizing: border-box;
		background: #FFFFFF;
	}
	
	.address {
		width: 4.8rem;
		height: 1rem;
		float: left;
		font-size: 0.2rem;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		color: #666;
		border-bottom: 1px dashed gainsboro;
		box-sizing: border-box;
	}
	
	.address>span {
		color: #8c8fa7;
	}
	
	.iconAreaBuild {
		display: inline-block;
		background: url(../../../static/imgage/icons.png) no-repeat;
		background-size: 10rem 10rem;
		width: .45333333rem;
		height: .45333333rem;
		background-position: -2.26666667rem -4.29333333rem;
		vertical-align: -.08rem;
		margin: 0 .06666667rem 0 0;
		margin-top: 0.2rem;
	}
	
	.tomap {
		width: 2.3rem;
		height: 1rem;
		float: left;
		padding: 0 0.2rem;
		box-sizing: border-box;
		font-size: 0.2rem;
		color: #8c8fa7;
		border-bottom: 1px dashed gainsboro;
		box-sizing: border-box;
	}
	
	.iconCheckMap {
		display: inline-block;
		background: url(../../../static/imgage/icons.png) no-repeat;
		background-size: 10rem 10rem;
		width: .45333333rem;
		height: .45333333rem;
		background-position: -3.17333333rem -4.29333333rem;
		vertical-align: -.08rem;
		margin: 0 .06666667rem 0 0;
		margin-top: 0.2rem;
	}
		.yuyuehid{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0,0,0,0.7);
		z-index: 100;
	}
	.yuyuetel>i{
		    display: block;
		    background: url(../../../static/image/icon_sprites.png) no-repeat;
		    background-size: 10rem 10rem;
		    background-position: -2.68rem 0;
		    width: .66666667rem;
		    height: .66666667rem;
		    position: fixed;
		    right: 0.3rem;
		    bottom: 2rem;
	}
	.yuyuetel{
		width: 7.5rem;
		height: 3rem;
		background: white;
		position: absolute;
		bottom: 0;
		padding: 0.3rem;
		box-sizing: border-box;
	}
	.popPreWrap{
		width: 6rem;
		height: 2.2rem;
	}
	.wraptitle{
		height: 0.7rem;
		font-size: 0.3rem;
		line-height: 0.7rem;
		color: #333;
	}
	.wrapcontent{
		height: 0.7rem;
		font-size: 0.2rem;
		color: #666666;
	}
	.wrapserch{
		height: 0.8rem;
	}
	.wrapserch>input{
		width: 3.8rem;
		height: 0.6rem;
		background: none;
		border: 1px solid gainsboro;
		margin-top: 0.1rem;
		outline: none;
		padding: 0 0.3rem;
		color: #333333;
		float: left;
		box-sizing: border-box;
		font-size: 0.25rem;
	}
	.wrapserch>span{
		display:block;
		width: 1.5rem;
		height: 0.6rem;
		float: left;
		margin-top: 0.1rem;
		font-size: 0.25rem;
		color: white;
		text-align: center;
		line-height: 0.6rem;
		background: #FE9900;
	}
	.yanzhengbox{
		width: 6.4rem;
		height: 3.9rem;
		background: white;
		margin: auto;
		border-radius:10px ;
		overflow: hidden;
		padding: 0.2rem;
		box-sizing: border-box;
		position: absolute;
		top: 30%;
		left: 50%;
		margin-left: -3.2rem;
	}
	.yanzhengbox>i{
		display: inline-block;
	    width: .666667rem;
	    height: .666667rem;
	    background: url(../../../static/image/icon_sprites.png) no-repeat -2.68rem top;
	    background-size: 10rem 10rem;
	    position: absolute;
	    right: .16rem;
	    top: .16rem;
	    font-size: 0;
	}
	.yztitle{
		width: 100%;
		height: 0.8rem;
		font-size: 0.3rem;
		color: #333333;
		line-height: 0.8rem;
	}
	.telcode{
		width: 100%;
		height: 1rem;
		margin-top: 0.5rem;
	}
	.telcode>input{
		width: 4rem;
		height: 0.6rem;
		background: none;
		outline: none;
		border: 1px solid gainsboro;
		box-sizing: border-box;
		float: left;
		padding: 0 0.2rem;
		box-sizing: border-box;
	}
	.telcode>span{
		display: block;
		width: 1.5rem;
		height: 0.6rem;
		font-size: 0.25rem;
		float: left;
		text-align: center;
		line-height: 0.6rem;
		background: #b2b2b2;
		color: white;
	}
	.subbtn{
		width: 6rem;
		height: 0.6rem;
		background: #b2b2b2;
		text-align: center;
		line-height: 0.6rem;
		font-size: 0.25rem;
		color: white;
		margin-top: 0.3rem;
	}
	.msgbox{
		width: 3rem;
		height: 0.5rem;
		background: gainsboro;
		position: absolute;
		top: 50%;
		left: 30%;
		text-align: center;
		font-size: 0.25rem;
		line-height: 0.5rem;
		color: red;
	}
</style>